import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { t } from '@/i18n';
import { api, isNotBuilt, isNotFound, safe } from '@/lib/api';
import { routes } from '@/lib/site';
import { regionShort } from '@/lib/regions';
import { TOPICS, isTopicId, topicById } from '@/lib/topics';
import type { CountryTopicResponse, MetricValue, SeriesResponse } from '@/lib/types';
import { IndicatorRow } from '@/components/country/indicator-row';
import { TopicCompact } from '@/components/country/topic-compact';
import { subtopicAnchor } from '@/lib/anchors';
import { CollapsibleGroup, SubtopicJumpNav } from '@/components/data/collapsible-group';
import { NotBuiltState } from '@/components/data/empty-state';
import { Section } from '@/components/data/section';
import { TopicNav } from '@/components/data/topic-nav';

export const revalidate = 900;

type Params = { slug: string; topic: string };
const EAGER = 4; // charts rendered with server-fetched full history; the rest mount on scroll
const SECTION_THRESHOLD = 12; // above this many indicators with data → collapsible subtopic blocks
const OPEN_BLOCKS = 2; // blocks expanded by default on a sectioned topic page

async function load(slug: string, topic: string): Promise<CountryTopicResponse | 'not-built' | null> {
  if (!isTopicId(topic)) return null;
  try {
    return await api.countryTopic(slug, topic);
  } catch (e) {
    if (isNotFound(e)) return null;
    if (isNotBuilt(e)) return 'not-built';
    throw e;
  }
}

export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
  const { slug, topic } = await params;
  const data = await load(slug, topic);
  if (!data || data === 'not-built') return { title: t('topic.notFound'), robots: { index: false } };
  const country = data.country.name ?? slug;
  const list = data.subtopics
    .flatMap((b) => b.indicators)
    .slice(0, 4)
    .map((m) => (m.indicator_name ?? m.indicator).toLowerCase())
    .join(', ');
  const title = t('topic.title', { country, topic: data.topic.name });
  const canonical = routes.countryTopic(data.country.slug ?? slug, topic);
  return {
    title,
    description: t('topic.description', { topic: data.topic.name, country, list }),
    alternates: { canonical },
    openGraph: { title: `${title} — ${t('site.name')}`, url: canonical, type: 'article' },
  };
}

export default async function CountryTopicPage({ params }: { params: Promise<Params> }) {
  const { slug, topic } = await params;
  const data = await load(slug, topic);
  if (data === null) notFound();
  if (data === 'not-built') return <NotBuiltState />;

  const c = data.country;
  const countryRef = { id: c.id, slug: c.slug ?? slug, name: c.name ?? c.id, flag: c.flag };
  const all = data.subtopics.flatMap((b) => b.indicators);
  const withData = all.filter((m) => m.has_data);
  const noData = all.filter((m) => !m.has_data);
  const blocks = data.subtopics.map((b) => ({ ...b, rows: b.indicators.filter((m) => m.has_data) })).filter((b) => b.rows.length > 0);
  // Long topics (> 12 indicators with data, ≥ 2 subtopics): collapsible subtopic blocks, first two expanded.
  const sectioned = withData.length > SECTION_THRESHOLD && blocks.length >= 2;
  const openBlocks = sectioned ? blocks.slice(0, OPEN_BLOCKS) : blocks;
  const eagerIds = openBlocks
    .flatMap((b) => b.rows)
    .slice(0, EAGER)
    .map((m) => m.indicator);
  const eagerSeries = await Promise.all(eagerIds.map((iid) => safe(api.countrySeries(c.id, iid))));
  const seriesById = new Map<string, SeriesResponse | null>(eagerIds.map((iid, i) => [iid, eagerSeries[i] ?? null]));
  const def = topicById(topic);
  const others = TOPICS.filter((tp) => tp.id !== topic);

  return (
    <>
      <header className="pb-3 pt-6 md:pt-10">
        <nav aria-label="Breadcrumb" className="text-xs text-ink-3">
          <Link href={routes.countries()} className="hover:text-accent">
            {t('nav.countries')}
          </Link>
          <span className="mx-1.5">/</span>
          <Link href={routes.country(countryRef.slug)} className="hover:text-accent">
            <span aria-hidden>{c.flag} </span>
            {countryRef.name}
          </Link>
        </nav>
        <h1 className="display mt-2 text-3xl leading-tight text-ink md:text-4xl">
          {countryRef.name} <span className="text-ink-3">·</span> {data.topic.name}
        </h1>
        <p className="mt-2 max-w-prose text-sm text-ink-2 md:text-base">{data.topic.blurb ?? def?.blurb}</p>
        <p className="tnum mt-1 text-xs text-ink-3">
          {t('topic.indicators', { n: data.n_indicators })} · {t('topic.withData', { n: data.n_with_data })}
        </p>
      </header>
      <TopicNav slug={countryRef.slug} />

      {sectioned ? <SubtopicJumpNav items={blocks.map((b) => ({ id: subtopicAnchor('sub', b.subtopic), label: b.subtopic, count: b.rows.length }))} label={t('topic.jump')} className="mt-3" /> : null}

      {blocks.map((block, i) => {
        const id = subtopicAnchor('sub', block.subtopic);
        const rowsEl = (
          <div>
            {block.rows.map((m: MetricValue) => (
              <IndicatorRow key={m.indicator} metric={m} country={countryRef} regionName={regionShort(c.region) ?? c.region_name} series={seriesById.get(m.indicator)} eager={seriesById.has(m.indicator)} />
            ))}
          </div>
        );
        if (sectioned)
          return (
            <CollapsibleGroup key={block.subtopic} id={id} title={block.subtopic} count={block.rows.length} defaultOpen={i < OPEN_BLOCKS} summary={<TopicCompact rows={block.rows} country={countryRef} regionName={regionShort(c.region) ?? c.region_name} />}>
              {rowsEl}
            </CollapsibleGroup>
          );
        return (
          <Section key={block.subtopic} id={id} title={block.subtopic} level={3} tight className="pb-2 pt-6">
            {rowsEl}
          </Section>
        );
      })}

      {noData.length ? (
        <details className="hairline group py-4">
          <summary className="flex min-h-[44px] cursor-pointer list-none items-center gap-2 text-sm font-medium text-ink-2 hover:text-ink">
            <span className="inline-block transition-transform group-open:rotate-90">›</span>
            {t('topic.noData', { n: noData.length })}
          </summary>
          <p className="mt-1 text-xs text-ink-3">{t('topic.noDataHint', { country: countryRef.name })}</p>
          <ul className="mt-2 grid gap-x-6 sm:grid-cols-2 lg:grid-cols-3">
            {noData.map((m) => (
              <li key={m.indicator} className="flex justify-between gap-3 border-t border-rule py-2 text-sm">
                <Link href={routes.indicator(m.indicator)} className="link-quiet truncate text-ink-2">
                  {m.indicator_name ?? m.indicator}
                </Link>
                <span className="shrink-0 text-xs text-ink-3">{t('common.noData')}</span>
              </li>
            ))}
          </ul>
        </details>
      ) : null}

      <Section id="other-topics" title={t('topic.otherTopics')} level={3} tight>
        <ul className="flex flex-wrap gap-1.5">
          {others.map((tp) => (
            <li key={tp.id}>
              <Link href={routes.countryTopic(countryRef.slug, tp.id)} className="inline-flex h-11 items-center rounded-sm border border-rule px-3 text-sm text-ink-2 hover:border-accent hover:text-accent md:h-9 md:px-2.5">
                {tp.short}
              </Link>
            </li>
          ))}
        </ul>
      </Section>
    </>
  );
}